<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: Logger - Customizing LogReader (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/grids/grids.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../../docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
/* customized ylogger styles - logger.css is NOT called above */
/* font size is controlled here: default 77% */
#yui-log {position:relative;font-size:85%;}
/* width is controlled here: default 31em */
.yui-log {padding:1em;width:31em;background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {position:relative;margin-top:1em;padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {position:relative;background-color:#FFF;border:1px solid gray;overflow:auto;width:100%;height:10em;}
.yui-log .yui-log-ft {position:relative;margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */

.yui-log .mytype {background-color:#FF99CC;} /* FF99CC pink */
</style>
</head>

<body>
<div id="doc" class="yui-t7">
    <div id="hd">
        <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Customizing LogReader</h1>
    </div>

    <div id="bd">
        <div id="yui-main">
        <div class="yui-b">
            <div class="yui-g first">
                <div class="yui-u first">
                    <!-- Content begins -->
                    <div id="content">
                        <h3>Customized LogReader Example</h3>
                        <p>These LogReaders have been customized, not only by modifying
                        the default CSS, but also, the <code>verboseOutput</code>
                        properties have been disabled, and the log messages of the first
                        LogReader have been formatted with a custom <code>formatMsg</code>
                        method.</p>

                        <p><input id="yui-log-inputinfo" class="yui-log-input" type="text" value="Log an info message.">
                            <button onclick="YAHOO.log(document.getElementById('yui-log-inputinfo').value,'info')">Log</button></p>
                        <p><input id="yui-log-inputwarn" class="yui-log-input" type="text" value="Log a warning.">
                            <button onclick="YAHOO.log(document.getElementById('yui-log-inputwarn').value,'warn')">Log</button></p>
                        <p><input id="yui-log-inputerror" class="yui-log-input" type="text" value="Log an error.">
                            <button onclick="YAHOO.log(document.getElementById('yui-log-inputerror').value,'error')">Log</button></p>
                        <p><input id="yui-log-inputtime" class="yui-log-input" type="text" value="Log a timing message.">
                            <button onclick="YAHOO.log(document.getElementById('yui-log-inputtime').value,'time')">Log</button></p>
                        <p><input id="yui-log-inputwindow" class="yui-log-input" type="text" value="Log a window error.">
                            <button onclick="someUndefinedFunction();">Log</button> (not supported in Opera, Safari)</p>
                        <p><input id="yui-log-inputcustommsg" class="yui-log-input" type="text" value="Log a custom type message.">
                            <input id="yui-log-inputcustomtype" type="text" value="mytype">
                            <button onclick="YAHOO.log(document.getElementById('yui-log-inputcustommsg').value,document.getElementById('yui-log-inputcustomtype').value)">Log</button></p>

                        <p><a href="javascript:YAHOO.example.LogReader.hideAllReaders();">Hide All LogReaders</a> ||
                        <a href="javascript:YAHOO.example.LogReader.showAllReaders();">Show All LogReaders</a></p>

                        <p><a href="javascript:YAHOO.widget.Logger.enableBrowserConsole();">Enable Output to console.log()</a> || <a href="javascript:YAHOO.widget.Logger.disableBrowserConsole();">Disable Output to console.log()</a>
                        </p>

                        <p><a href="javascript:YAHOO.widget.Logger.reset();">Reset Logger stack</a></p>
                    </div>
                    <!-- Content ends -->
                </div>

                <div class="yui-u">
                    <!-- Logger begins -->
                    <div id="yui-log" class="yui-log"></div>
                    <!-- Logger ends -->
                </div>
            </div>
                
            <div class="yui-g">
                <!-- Sample code begins -->
                <div id="code">
                    <h3>Sample Code</h3>

                    <textarea name="code" class="HTML" cols="60" rows="1">
                    <head>
                    <style type="text/css">
                    /* container is relatively positioned and
                    font size is adjusted here (default is 77%) */
                    #yui-log {position:relative;font-size:85%;}

                    /* width is controlled here: default 31em */
                    .yui-log {padding:1em;width:31em;background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}

                    .yui-log p {margin:1px;padding:.1em;}
                    .yui-log button {font-family:monospace;}
                    .yui-log .yui-log-hd {position:relative;margin-top:1em;padding:.5em;background-color:#575757;color:#FFF;}

                    /* height is controlled here: default 20em*/
                    .yui-log .yui-log-bd {position:relative;background-color:#FFF;border:1px solid gray;overflow:auto;width:100%;height:10em;}

                    .yui-log .yui-log-ft {position:relative;margin-top:.5em;margin-bottom:1em;}
                    .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
                    .yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
                    .yui-log .warn {background-color:#F58516;} /* F58516 orange */
                    .yui-log .error {background-color:#E32F0B;} /* E32F0B red */
                    .yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
                    .yui-log .window {background-color:#F2E886;} /* F2E886 tan */

                    /* a style for a custom category */
                    .yui-log .mytype {background-color:#FF99CC;} /* FF99CC pink */
                    </style>
                    </head>

                    <body>
                    <!-- Logger begins -->
                    <div id="yui-log" class="yui-log"></div>
                    <!-- Logger ends -->

                    <script type="text/javascript">
                    myLogReader1 = new YAHOO.widget.LogReader("yui-log",{verboseOutput: false});
                    myLogReader1.formatMsg = function(oLogMsg) {
                        var category = oLogMsg.category;
                        return "<p><span class='"+category+"'>"+category+"</span> "+
                            this.html2Text(oLogMsg.msg)+"</p>";

                    };
                    myLogReader2 = new YAHOO.widget.LogReader("yui-log",{verboseOutput: false});
                    </script>
                    </body>
                    </textarea>
                </div>
                <!-- Code sample ends -->
            </div>
        </div>
        </div>
    </div>
</div>

<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->

<script type="text/javascript">
YAHOO.example.LogReader = function() {
    var myLogReader1;
    var myLogReader2;

    return {
        init: function() {
            myLogReader1 = new YAHOO.widget.LogReader("yui-log",{verboseOutput: false});
            myLogReader1.formatMsg = function(oLogMsg) {
                var category = oLogMsg.category;
                return "<p><span class='"+category+"'>"+category+"</span> "+
                    this.html2Text(oLogMsg.msg)+"</p>";

            };
            myLogReader2 = new YAHOO.widget.LogReader("yui-log",{verboseOutput: false});
        },

        hideAllReaders: function() {
            myLogReader1.hide();
            myLogReader2.hide();
        },

        showAllReaders: function() {
            myLogReader1.show();
            myLogReader2.show();
        }
    };
}();

YAHOO.util.Event.onAvailable("yui-log",YAHOO.example.LogReader.init);
</script>

<script type="text/javascript" src="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>
